<template>
  <div
    class="SubItem"
    :class="{
      middlePosition: order < rightMenuOrder,
      rightPosition: order >= rightMenuOrder,
      routerActive: route.path.startsWith(index),
    }"
    :key="index"
  >
    <div
      class="wrapper"
      @mouseenter="handleMouseenter"
      @mouseleave="handleMouseleave"
    >
      <div
        class="subTitle"
        @click="handleClick"
        :style="{
          background: bg ? `url(${bg}) no-repeat center` : '#fff',
        }"
        :class="{
          firstClass: order === 1,
          middleClass: order > 1 && order <= rightMenuOrder,
          lastClass: order > rightMenuOrder,
          isActive: active,
        }"
      >
        <a type="button">
          <slot name="title"></slot>
          <div class="triangle"></div
        ></a>
      </div>
      <template v-if="order >= rightMenuOrder">
        <transition name="el-fade-in-linear">
          <div
            class="nextMenu"
            ref="nextMenu"
            v-show="showMen"
            style="overflow: visible"
          >
            <slot :bg="bg"></slot>
          </div>
        </transition>
      </template>
      <template v-else>
        <el-collapse-transition>
          <div
            class="nextMenu"
            ref="nextMenu"
            v-show="showMen"
            style="overflow: visible"
          >
            <slot :bg="bg"></slot>
          </div>
        </el-collapse-transition>
      </template>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
const props = defineProps({
  order: {
    type: Number,
    default: 0,
  },
  rightMenuOrder: {
    type: Number,
    default: 2,
  },
  bg: {
    type: String,
    default: '',
  },
  index: {
    type: String,
    default: '',
  },
});
const route = useRoute();
const showMen = ref(false);
const active = ref(false);
function handleClick() {
  console.log(route.path,props.index)
  if (props.order >= props.rightMenuOrder) {
    return;
  }
  active.value = !active.value;
  showMen.value = !showMen.value;
}
function handleMouseenter() {
  if (props.order < props.rightMenuOrder) {
    return;
  }
  active.value = true;
  showMen.value = true;
}
function handleMouseleave() {
  if (props.order < props.rightMenuOrder) {
    return;
  }
  active.value = false;
  showMen.value = false;
}
</script>
<style lang="scss" scoped>
@import './menu.scss';
.SubItem {
  margin-top: 2px;
  width: 100%;
  .wrapper {
    position: relative;
    .subTitle {
      width: 100%;
      border: 2px solid #fbc73a;
      // border-bottom: none;
      box-sizing: border-box;
      height: 40px;
      line-height: 36px;
      padding: 0 18px 0 8px;
      background: #fff;
      border-radius: 5px;
      box-sizing: border-box;
      font-size: 14px;
      // border-bottom: none;
      background-size: 100% 100% !important;
      color: #fff;
      .triangle {
        position: absolute;
        width: 14px;
        height: 14px;
        // background: #fff;
        z-index: 9999;
        right: -16px;
        top: calc(50% - 4px);
        border: 7px solid #fff;
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-right-color: transparent;
        box-sizing: border-box;
        transition: all 0.1s ease-in-out;
      }
      &.isActive {
        .triangle {
          // transform-origin: left center;
          // transform: rotate(90deg);
          border: 7px solid #fff;
          // border-top-color: transparent;
          right: -22px;
          top: calc(50% - 7px);
          border-top-color: transparent;
          border-bottom-color: transparent;
          // border-left-color: transparent;
          border-right-color: transparent;
        }
      }
      @include title;
      @include a;
    }
    .nextMenu {
      position: relative;
      width: 100%;
      // height: 0;
      // overflow: hidden;
      // transition: height 0.3s ease-in-out;
      // padding-left: 10px;
    }
  }
  &.middlePosition {
    .nextMenu {
      border: 1px solid #00a3ff;
      border-radius: 5px;
      // padding-bottom: 5px;
      padding: 0 3px 5px;
      // margin-top: 2px;
    }
  }
  &.rightPosition {
    .wrapper {
      .nextMenu {
        width: 165px;
        position: absolute;
        left: calc(100% + 15px);
        // padding-left: 10px;
        top: -2px;
        z-index: 999;
        background: linear-gradient(
            90deg,
            #2350b6 0%,
            #51abff 50.52%,
            #2350b6 100%
          ),
          linear-gradient(
            90deg,
            #004dc0 0%,
            rgba(69, 166, 255, 0) 22.92%,
            rgba(53, 158, 255, 0) 48.44%,
            rgba(53, 158, 255, 0) 71.35%,
            #0e63e2 100%
          );
        border: 2px solid #fbc73a;
        &::before {
          content: '';
          position: absolute;
          background: transparent;
          width: 20px;
          height: 120%;
          top: -20%;
          left: -17px;
          z-index: 99;
          cursor: pointer;
        }
        &::after {
          content: '';
          background: url('./tringger.png');
          width: 11px;
          height: 15px;
          position: absolute;
          top: 10px;
          left: -11px;
          z-index: 999;
        }
      }
    }
  }
}
</style>
